<template>
	<view class="tm-tabs " :class="[bgColor=='white'?( black_tmeme?'bk grey-darken-4':bgColor):bgColor,'shadow-'+bgColor+'-'+shadow , black_tmeme?'bk':'']">
		<scroll-view @scroll="scrollViesw" scroll-x class="tm-tabs-con">
			<view
				class="tm-tabs-wk  "
				:class="{
					'flex-start': align == 'left',
					'flex-end': align == 'right',
					'flex-center': align == 'center',
					'flex-between': align == 'split'
				}"
			>
				<view
					@click="acitveItemClick(index)"
					class="tm-tabs-con-item d-inline-block px-28"
					:class="[
						model == 'rect' ? 'border-' + color_tmeme + '-a-1' : '',
						index !== list.length - 1 && model == 'rect' ? 'tm-tabs-con-item-rborder' : '',
						active == index && model == 'rect' ? color_tmeme : ''
					]" 
					:style="{
						height:barheight+'px',
						lineHeight:barheight+'px',
					}"
					v-for="(item, index) in list"
					:key="index"
					:id="guid + '_' + index"
				>
					<view class="tm-tabs-con-item-text " 
					:style="{
						fontSize:(active == index?active_font_size:font_size),
					}"
					:class="[
						model == 'line' && active == index ? 'text-' + color_tmeme : '',
						model == 'line' && active == index ? 'text-weight-b': '',
						
						]"
					><slot name="default" :data="item">{{ item[rangeKey]||item }}</slot></view>
				</view>
			</view>
			<view
				v-if="model == 'line'"
				class="tm-tabs-con-item-border"
				:class="[color_tmeme,`shadow-${color_tmeme}-4`]"
				:style="{
					left: activePos.left,
					width: activePos.width
				}"
			></view>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 选项卡切换
	 * @property {String} model = [line|rect] 默认：line，样式,线和框两种
	 * @property {String} color = [] 默认：primary，主题文字颜色。
	 * @property {String} bg-color = [] 默认：white，主题背景颜色。
	 * @property {Number} value = [] 默认：0，当前激活的项。双向绑定使用value.sync或者v-model
	 * @property {Number} font-size = [] 默认：28，默认字体大小，单位upx
	 * @property {Number} active-font-size = [] 默认：28，激活后字体大小，单位upx
	 * @property {String} align = [center|left|right|split] 默认：center，居中，左，右，均分对齐
	 * @property {String|Number} height = [90|100] 默认：90，高度。单位 upx
	 * @property {Array} list = [] 默认：[]，数据数组，可以是字符串数组，也可以是对象数组，需要提供rangKey
	 * @property {String} range-key = [] 默认：''，数据数组，需要提供rangKey以显示文本。
	 * @property {Function} change 返回当前选中的index值同v-model一样的值
	 * @property {String} active-key-value = [] 默认：''，当前激活项(和value一样的功能)，如果提供对象数组，则可以提供当前选项list[index][activeKey]的对象数据来自动解析当前选择的index项
	 */
export default {
	name: 'tm-tabs',
	model: {
		prop: 'value',
		event: 'input'
	},
	props: {
		// 样式,
		model: {
			type: String,
			default: 'line' //line|rect
		},
		// 主题色包括文字颜色
		color: {
			type: String,
			default: 'primary'
		},
		// 背景颜色。
		bgColor: {
			type: String,
			default: 'white'
		},
		// 当前激活的项。
		value: {
			type: Number,
			default: 0
		},
		// 项目对齐方式。
		align: {
			type: String,
			default: 'center' // center|left|right|split
		},
		// 单位为upx
		height: {
			type: String|Number,
			default: 90
		},
		black:{
			type:Boolean|String,
			default:null
		},
		// 投影。
		shadow: {
			type: String|Number,
			default: 3
		},
		list:{
			type:Array,
			default:()=>{
				// { title: '标签1', value: '' }, { title: '标签2标签标签', value: '' }, { title: '标签3', value: '' }
				return [];
			}
		},
		rangeKey:{
			type:String,
			default:''
		},
		// 当前激活项，如果提供对象数组，则可以提供当前选项的对象数据来自动解析当前选择的index项
		activeKeyValue:{
			type:String,
			default:''
		},
		fontSize:{
			type:Number,
			default:28
		},
		activeFontSize:{
			type:Number,
			default:28
		},
		// 跟随主题色的改变而改变。
		fllowTheme:{
			type:Boolean|String,
			default:true
		}
	},
	watch:{
		activeKeyValue:function(){
			this.setActiveIndex();
		},
		value:async function(val){
			this.active = val;
			await this.acitveItemClick(val);
		},
		active:async function(val){
			
			this.$emit('input', val);
			this.$emit('update:value', val);
			this.$emit('change', val);
		}
	},
	computed: {
		font_size:function(){
			return uni.upx2px(this.fontSize)+'px';
		},
		active_font_size:function(){
			return uni.upx2px(this.activeFontSize)+'px';
		},
		black_tmeme: function() {
			if (this.black !== null) return this.black;
			return this.$tm.vx.state().tmVuetify.black;
		},
		color_tmeme:function(){
			if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
				return this.$tm.vx.state().tmVuetify.color;
			}
			return this.color;
		},
		barheight: function() {
			let h = parseInt(this.height);
			if (isNaN(h) || !h) h = 90;
			return uni.upx2px(h);
		},
		
	},
	data() {
		return {
			active:0,
			guid: '',
			scrollObj: null,
			activePos: {
				left: 0,
				width: 0
			},
			preantObjinfo:null,
		};
	},
	async mounted() {
		let t = this;
		this.guid = uni.$tm.guid();
		this.active = this.value;
		this.setActiveIndex();
		
		let pd = await this.$Querey('.tm-tabs').catch(e => {});
		this.preantObjinfo = pd[0]
		this.$nextTick(async function(){
			setTimeout(async function() {
				await t.acitveItemClick(t.active);
			}, 300);
		})
		
	},
	methods: {
		scrollViesw(e) {
			this.scrollObj = e;
		},
		setActiveIndex(){
			let t = this;
			if(typeof this.list[0] === 'object' && this.rangeKey){
				let index = this.list.findIndex(item=>{
					return item[t.rangeKey] == t.activeKeyValue;
				})
				
				if (index>-1){
					this.active = index;
				}
			}
		},
		async acitveItemClick(indx) {
			
			if(this.list.length<=0) return;
			if(typeof this.list[indx] =='undefined') return;
			await uni.$tm.sleep(110)
			this.$nextTick(async function() {
				let pd = await this.$Querey('#' + this.guid + '_' + indx).catch(e => {});
				let itemObj = pd[0];
				
				let leftScroll = 0;
				if (this.scrollObj) {
					leftScroll = this.scrollObj.detail.scrollLeft;
				}
				if(this.preantObjinfo){
					leftScroll -= this.preantObjinfo.left;
				}
				let activeLeft = itemObj.left + leftScroll;
				let baw = 24;
				this.activePos = {
					left: activeLeft + (itemObj.width - baw) / 2 + 'px',
					width: baw + 'px'
				};
				this.active = indx;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.tm-tabs {
	.tm-tabs-con {
		position: relative;

		.tm-tabs-con-item-border {
			height: 4px;
			border-radius: 4px;
			position: absolute;
			margin-top: -4px;
			width: 10px;
			transition: left 0.2s linear;
		}
		.tm-tabs-wk {
			position: relative;
			left: 0;
			white-space: nowrap;
			width: 100%;
			.tm-tabs-con-item {
				flex-shrink: 0;
				.tm-tabs-con-item-text {
					transition: all 0.1s;
				}
				&.tm-tabs-con-item-rborder {
					border-right: 0;
				}
			}
		}
	}
}
</style>
